import React, { useState } from 'react';
import './LeftDiv.css';
// tab切换组件引入
import Wrok1 from './Wrok1'
import Wrok2 from './Wrok2'
import Wrok3 from './Wrok3'
import Wrok4 from './Wrok4'
import Wrok5 from './Wrok5'
import Wrok6 from './Wrok6'
import Wrok7 from './Wrok7'
import Wrok8 from './Wrok8'
import {
    DesktopOutlined,
    FileOutlined,
    UserOutlined,
} from '@ant-design/icons';
interface TabContent {
    label: string;
    content: JSX.Element;
    icon: React.ReactNode;
}
interface DrawerState {
    isDrawerOpen: boolean;
}

function Index() {
    const [activeTab, setActiveTab] = useState<number>(0);
    const [drawerState, setDrawerState] = useState<DrawerState>({ isDrawerOpen: false });
    //    const [activeTabKey, setActiveTabKey] = useState<string>('');
    const tabContents: TabContent[] = [
        { icon: <DesktopOutlined></DesktopOutlined>, label: '上传', content: <div><Wrok1></Wrok1></div> },
        { icon: <FileOutlined></FileOutlined>, label: '模版', content: <div><Wrok2></Wrok2></div> },
        { icon: <UserOutlined></UserOutlined>, label: '素材', content: <div><Wrok3></Wrok3></div> },
        { icon: <UserOutlined></UserOutlined>, label: '文字', content: <div><Wrok4></Wrok4></div> },
        { icon: <UserOutlined></UserOutlined>, label: '图片', content: <div><Wrok5></Wrok5></div> },
        { icon: <UserOutlined></UserOutlined>, label: '背景', content: <div><Wrok6></Wrok6></div> },
        { icon: <UserOutlined></UserOutlined>, label: '组件', content: <div><Wrok7></Wrok7></div> },
        { icon: <UserOutlined></UserOutlined>, label: 'AI 工具', content: <div><Wrok8></Wrok8></div> },
    ];

    const handleTabClick = (index: number) => {
        setActiveTab(index);
        setDrawerState((prevState) => ({ isDrawerOpen: !prevState.isDrawerOpen }));
    };
    const handleDrawerToggle = () => {
        setDrawerState((prevState) => ({ isDrawerOpen: !prevState.isDrawerOpen }));
    };
    return (
        <div className="tab-component">
            <div className="tab-header">
                {tabContents.map((tab, index) => (
                    <div
                        key={index}
                        className={activeTab === index ? 'tab-content' : 'tab-header'}
                        onClick={() => handleTabClick(index)}
                        style={{ width: "50px", height: "50px", display: 'flex', flexDirection: "column", textAlign: "center", justifyContent: 'center', alignItems: 'center'}}
                    >
                        {tab.icon}{tab.label}
                    </div>
                ))}
            </div>
            <div className={`drawer ${drawerState.isDrawerOpen ? 'open' : 'closed'}`}>
                <button onClick={handleDrawerToggle} className='chouti'>
                    {drawerState.isDrawerOpen ? '取消' : '展开'}
                </button>
                <div>
                    {tabContents[activeTab].content}
                </div>

            </div>
            <div>
                <div id='huabu'></div>
            </div>

        </div>
    )
}

export default Index